<template>
  <div class="project-report-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>实施项目统计报表</span>
          <el-button type="primary" @click="handleExport">
            <el-icon><Download /></el-icon>
            导出报表
          </el-button>
        </div>
      </template>

      <!-- 统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="总项目数" :value="20" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="进行中" :value="8">
              <template #prefix>
                <el-icon style="color: #409EFF"><Clock /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="已完成" :value="10">
              <template #prefix>
                <el-icon style="color: #67C23A"><CircleCheck /></el-icon>
              </template>
            </el-statistic>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <el-statistic title="按时完成率" :value="85" suffix="%" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>项目状态分布</span>
            </template>
            <v-chart :option="statusChartOption" style="height: 350px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" style="margin-bottom: 20px">
            <template #header>
              <span>项目预算执行情况</span>
            </template>
            <v-chart :option="budgetChartOption" style="height: 350px" />
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <span>项目进度对比</span>
            </template>
            <v-chart :option="progressChartOption" style="height: 400px" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 项目列表 -->
      <el-card shadow="hover" style="margin-top: 20px">
        <template #header>
          <span>项目详细数据</span>
        </template>
        <el-table :data="projectData" border stripe>
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="name" label="项目名称" min-width="200" />
          <el-table-column prop="customer" label="客户" width="150" />
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="进度" width="150">
            <template #default="{ row }">
              <el-progress :percentage="row.progress" />
            </template>
          </el-table-column>
          <el-table-column prop="budget" label="预算" width="120" align="right">
            <template #default="{ row }">
              ¥{{ row.budget.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="startDate" label="开始日期" width="120" />
          <el-table-column prop="endDate" label="结束日期" width="120" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { ElMessage } from 'element-plus'
import { Download, Clock, CircleCheck } from '@element-plus/icons-vue'

use([CanvasRenderer, PieChart, BarChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const projectData = ref([
  { name: 'XX集团ERP实施', customer: 'XX集团', status: 'inprogress', progress: 75, budget: 500000, startDate: '2024-01-15', endDate: '2024-12-31' },
  { name: 'YY公司财务系统', customer: 'YY公司', status: 'completed', progress: 100, budget: 300000, startDate: '2024-03-01', endDate: '2024-09-30' },
  { name: 'ZZ制造ERP项目', customer: 'ZZ制造', status: 'inprogress', progress: 45, budget: 800000, startDate: '2024-06-01', endDate: '2025-03-31' }
])

const statusChartOption = ref({
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [{
    name: '项目状态',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 8, name: '进行中' },
      { value: 10, name: '已完成' },
      { value: 2, name: '待启动' }
    ]
  }]
})

const budgetChartOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { data: ['预算', '实际支出'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value', name: '金额(万元)' },
  series: [
    { name: '预算', type: 'bar', data: [120, 150, 180, 200] },
    { name: '实际支出', type: 'bar', data: [110, 140, 165, 185] }
  ]
})

const progressChartOption = ref({
  tooltip: { trigger: 'axis' },
  legend: { data: ['计划进度', '实际进度'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: { type: 'category', data: ['项目A', '项目B', '项目C', '项目D', '项目E'] },
  yAxis: { type: 'value', name: '进度(%)', max: 100 },
  series: [
    { name: '计划进度', type: 'line', data: [80, 70, 60, 85, 90], smooth: true },
    { name: '实际进度', type: 'line', data: [75, 72, 45, 88, 92], smooth: true }
  ]
})

const getStatusType = (status) => {
  const map = { pending: 'info', inprogress: 'primary', completed: 'success', paused: 'warning' }
  return map[status] || ''
}

const getStatusText = (status) => {
  const map = { pending: '待启动', inprogress: '进行中', completed: '已完成', paused: '已暂停' }
  return map[status] || status
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.project-report-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
}
</style>

